<template>
  <el-dialog :model-value="dialogData.isShow" title="信息源" @close="closeDialog" draggable width="60%">
    <el-form :model="queryForm" label-width="80px">
      <el-row :gutter="20">
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="搜索">
            <el-input v-model="queryForm.keyword" @keyup.enter="onSearch" clearable placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label="执行状态" prop="status">
            <el-select
                v-model="queryForm.status"
                placeholder="请选择执行状态"
                style="width: 240px"
                clearable
            >
              <el-option
                  v-for="item in [{'id': '1', 'title': '是'}, {'id': '0', 'title': '否'}]"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :md="12" :lg="8" :xl="6">
          <el-form-item label-width="0">
            <el-button type="primary" @click="onSearch">
              <el-icon>
                <ele-search/>
              </el-icon>
              <span class="search-btn__left">查询</span>
            </el-button>
            <el-button @click="onReset">
              <el-icon>
                <ele-refresh/>
              </el-icon>
              <span class="search-btn__left">重置</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table v-loading="tableLoading.status" :data="tableData.data" border row-key="id">
      <el-table-column prop="_tableIndex" label="序号" align="center" width="50px"/>
      <el-table-column prop="name" label="网站名称" align="center" show-overflow-tooltip/>
      <el-table-column prop="url" label="采集URL" align="center" show-overflow-tooltip/>
      <el-table-column prop="scriptName" label="采集脚本名称" align="center" show-overflow-tooltip/>
      <el-table-column prop="scriptUrl" label="脚本路径" align="center" show-overflow-tooltip/>
      <el-table-column prop="status" label="是否需要执行" align="center" show-overflow-tooltip>
        <template #default="scope">
          <div>
            <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{ scope.row.status == 1 ? '是' : '否' }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="executionTime" label="执行时间" align="center"/>
    </el-table>
    <CustomPagination v-model:currentPage="pagination.pageIndex" v-model:pageSize="pagination.pageSize"
                      :total="pagination.total" @changePage="changePage"/>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {getCrawlerUrlPage} from "@/api/app/crawlerUrl";
import {calcTableIndex} from "@/utils/util";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null,
})

// 打开弹框
const openDialog = async (id: string) => {
  dialogData.id = id
  dialogData.isShow = true;
  getTableList()
}

/** 查询参数 **/
let queryForm: any = ref({
  keyword: null,
});

const tableLoading = ref({
  status: false
})

// 查询
const onSearch = () => {
  pagination.pageIndex = 1;
  getTableList();
}
// 重置
const onReset = () => {
  queryForm.value = {}
  pagination.pageIndex = 1;
  getTableList();
}

/** 分页*/
// 分页数据
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})
// 翻页
const changePage = (page: number) => {
  pagination.pageIndex = page;
  getTableList();
}

/** 表格*/
// 表格数据
const tableData = reactive({
  data: [],
})
// 获取表格列表
const getTableList = () => {
  tableLoading.value.status = true;
  queryForm.value.crawlerUrlCategoryId = dialogData.id
  getCrawlerUrlPage({...pagination, ...queryForm.value}).then(res => {
    tableData.data = calcTableIndex(res, pagination);
    pagination.total = res.total;
    tableLoading.value.status = false;
  })
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  dialogData.id = null;
}

defineExpose({
  openDialog,
});
</script>

<style scoped></style>
